<template>
  <div class="yxp-course" style="overflow: hidden;overflow-y: auto">
    <div class="yxp-composition-top">
      <div class="back" id="yxp-commp-back" @click="handleBack">
        <span></span>
      </div>
      <div class="yxp-top-c">{{title}}</div>
      <div class="yxp-top-r" >
<!--        <span class="right-text-item" v-if="type === '0'" id="yxp-commp-back1">训练记录</span>-->
          <span class="right-text-item"  id="yxp-commp-back2" >打印</span>
          <span class="right-text-item"  id="yxp-commp-back3" @click="isPoint = true">要点解读</span>
      </div>
      <div  style="width: 40px">
      </div>
    </div>
    <BackTips  :title="tips" :isBack="isBack" :types="title" :courseId="toNumber(id)"  @close="handleClosed"/>
    <div class="yxp-scene-main">
      <div class="main-box" v-if="!isVoice && !isRead">
        <div class="main-box-item">
          <div class="content">
            <div class="content-wrap">
              <!-- <div class="content-wrap-box"> -->
              <h3 class="work-title">写作要求</h3>
              <div class="work-info"  v-html="content.require"></div>
              <!-- </div> -->
            </div>
          </div>
        </div>
      </div>
      <div class="main-box">
        <div class="main-box-item" v-if="isModel">
          <div class="content">
            <div class="content-wrap">
              <div class="close" id="yxp-scene-btn3" ></div>
              <div class="model-info" >
                <template>
                <template>
                  <span v-for="(item,i) in zhText" :key="'z' + i" v-html="item"></span>
                </template>
              </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="scene" v-if="!isVoice">
      <div class="scene-btn">
        <div  v-if="!isModel" class="scene-btn-item" id="yxp-scene-btn" @click="handleScene">
          <span>情景构建</span>
          <img src="@/assets/word/no-next.png" />

        </div>
        <div v-if="isModel" class="scene-btn-item" id="yxp-scene-btn" @click="GoModel">
          <span>模型训练</span>
          <img src="@/assets/word/no-next.png" />
        </div>
      </div>
    </div>
    <div class="mark" v-if="isPoint"></div>
    <readPop :isPoint="isPoint" :content="content.analysis" @point="handlePoint" />
  </div>
</template>
<script>
import TopBack from '@/views/components/TopBack.vue'
import readPop from '@/views/components/readPop.vue'
import {storage} from '@/utils/storage.js'
import BackTips from "@/views/components/BackTips.vue";
import {toNumber} from "lodash/lang";
import {progressSet} from "@/api/reverse";
export default {
  name: 'sceneIndex',
  components: {
    BackTips,
    TopBack,
    readPop
  },
  data () {
    return {
      isBack: false,
      tips: '是否退出学习？',
      asrData: [],
      recIsOpen: false,
      BSync: null,
      isController: false,
      title: '情景植入',
      content: '',
      courseId: '',
      id: 0,
      course_type: 0,
      isShow: false,
      isPoint: false,
      isBuffer: false, // gai
      isVoice: false,
      isModel: false,
      isDetail: true,
      isRead: false, // gai
      zhText: [],
      DB: 0,
      voice: 0,
      socket: null,
     // isFinished: false,
      audio: "",
     // audioSrc: '',
     // recorder: new Record(),
      timer: null,
      type: '1',
       rec: null,
      wave: null,
      recBlob: null,
       recordTransformData: null,
      recordStarted: false,
      voiceResult: '',
      voiceModel: '',
      max_record: 0,
      result: '',
      articleType: 0,
      isStart: false,
      isAllow: false,
      buffer: [],
      sn: window.location.href
    }
  },
  watch: {
  },

 async created () {
    // this.BSync = window.isBSync()
    // this.isController = window.isController()
    // if (this.$route.query.id) {
    //   let { courseId, id, course_type } = this.$route.query
    //   this.courseId = +courseId
    //   this.id = +id
    //   this.course_type = +course_type
    // }
    let pms ={
      id:this.$route.query.id,
      userId:this.$route.query.userid,
      progress:1,
      state:0,
    }
    await progressSet(pms).then((res)=>{
      let ModeListInfo = storage.get('ModeListInfo')
      ModeListInfo = {
        ...ModeListInfo,
        num:res.data.num
      }
      storage.set('ModeListInfo', ModeListInfo)
    })
    this.id = this.$route.query.userid
    let data = storage.get('sceneData')
    console.log(data)
    if (data) {
      this.content = data
      this.max_record = parseInt(data.max_record)
      this.articleType = data.type
      let zhText = data.sentenceTranslation
      if (this.articleType === 1 || this.articleType === 5 || this.articleType === 2) {
        this.zhHead = zhText.splice(0,1).join('').replace('##','')
        this.zhEnd = zhText.pop()
        if (this.zhEnd.indexOf('##')) {
          this.zhEnd = this.zhEnd.replace('##','<br/>')
        }
      } else if (this.articleType === 3 || this.articleType === 4) {
        this.zhHead = zhText.splice(0,1).join('').replace('##','')
      }
      let zhArr = []
      zhText.map(item =>{
        if (item.indexOf('&&') !== -1 || item.indexOf('##') !== -1) {
          let val = item.replace('&&', '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;').replace('##','<br>')
          zhArr.push(val)
        } else {
          zhArr.push(item)
        }
      })
      this.zhText = zhArr
    }
  },
  beforeDestroy () {

  },
  methods: {
    toNumber,
    handleBack(){
      this.isBack = true
    },
    handleClosed(val) {
      this.isBack = val
    },
    handleScene () {
      console.log(123)
      this.isShow = true
      this.isRead = true
      this.isModel = true
      // this.type = '2'
    },
    GoModel(){
      this.$router.push({
        path: '/composition/breakTrain',
        query: {
          userid: this.id,
          id:this.$route.query.id,
        }
      })
    },
    handlePoint (val) {
      this.isPoint = val
    },

    handleCloseModel () {
      this.isModel = false
    }
  }
}
</script >
<style scoped>
::-webkit-scrollbar {
  display: none;
}
.work-info p {
  margin: 0;
  padding: 0;
}

.right-text-item {
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  color: #27BFA3;
  margin-left: 60px;
  cursor: pointer;
}
.yxp-composition-top {
  height: 80px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  background: #fff;
  padding: 0 40px;
  .yxp-top-r {
    color: #27BFA3;
    font-size: 20px;
    font-weight: 400;
    position: absolute;
    right: 40px;
    .right-text-item {
      cursor: pointer;
      &:last-child {
        margin-left: 60px;
      }
    }
  }
}
#yxp-commp-back{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 30px;
  height: 27px;
  span{
    display: block;
    width: 30px;
    height: 27px;
    background: url() no-repeat;
    background-size: 100%;
    cursor: pointer;
  }
}
.yxp-course{
  width: 100%;
  background: #F0F2F4;
  height: 100%;
}
.scene{
  display: flex;
  width: 100%;
}
.scene-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 800px;
  margin: 0 auto;
}
.scene-box {
  height: calc(100% - 110px) !important;
  overflow-y: auto !important;
  overflow-x: hidden;
}
.scene-btn-item{
  display: flex;
  align-items: center;
  cursor: pointer;
  span{
    color: #27bfa3;
    font-size: 25px;
    font-weight: 400;
  }
  img{
    width: 45px;
    height: 45px;
    margin-left: 10px;
  }
}
.ask-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-align: center;
  padding-top: 30px;
}
.info {
  font-size: 20px;
  font-weight: 400;
  color: #333;
  padding-top: 20px;
}
.main-box{
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 30px;
}
.main-box-item{
  position: relative;
  width: 800px;
  height: 400px;
  overflow: hidden;
  background: #fff;
  border-radius: 10px;
  overflow-y: auto;
  padding: 40px;
}
 .content-wrap {
  position: relative;
  text-align: left;
  padding-top: 0;
}
.work-title {
  font-size: 30px;
  text-align: center;
}
.main-box-content .content-wrap {
  position: relative;
  text-align: left;
  padding-top: 0;
}
.main-box-content .content-wrap .work-title {
  padding-top: 30px;
}
.main-box-content .content-wrap .close {
  position: absolute;
  right: 20px;
  top: 2px;
  width: 20px;
  height: 20px;
  background: url(@/assets/word/close-icon.png) no-repeat;
  background-size: 20px 20px;
  cursor: pointer;
}
.main-box-content .content-wrap .close:hover {
  background-image: url(@/assets/word/close-hover.png);
}
.model-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-align: center;
}
.model-info {
  font-size: 20px;
  font-weight: 400;
  color: #333;
  margin-top: 20px;
}
.record {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 120px;
  text-align: center;
  background: #fff;
  opacity: 0.95;
}
.record .first-item {
  margin-right: 90px;
}
.record-item {
  cursor: pointer;
}
.record-item img {
  width: 80px;
  height: 80px;
  margin-top: 10px;
  margin-bottom: -13px;
}
.record-item-text {
  font-size: 16px;
  font-weight: 400;
  color: #27BFA3;
}
.buffer-wrap {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  width: 100%;
  min-width: 1200px;
  z-index: 19;
}
.buffer {
  position: absolute;
  left: 50%;
  bottom: -60px;
  transform: translateX(-50%);
  width: 600px;
  height: 250px;
  background: #E7F2EF;
  border-radius: 10px;
  margin: 0 auto;
  z-index: 20;
}
.buffer-desc {
  height: 130px;
  font-size: 16px;
  font-weight: 400;
  color: #333;
  text-align: left;
  padding: 30px 40px 14px;
  overflow: hidden;
}
.buffer-desc-content {
  height: 100%;
  overflow: auto;
}
.buffer-desc-content::-webkit-scrollbar {
  width: 0 !important;
}
.buffer .bg-item {
  z-index: 2;
}
.buffer .bg-item span {
  background: #eee;
}
.buffer .sec-item {
  z-index: 3;
}
.buffer-item {
  position: absolute;
  left: 50%;
  bottom: 65px;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 20px;
  margin-top: 20px;
}
.buffer-item span {
  display: inline-block;
  width: 2px;
  height: 40px;
  background: #47CBB3;
  border-radius: 3px;
  margin-right: 3px;
}
.buffer-item span:nth-child(1) {
  height: 20px;
}
.buffer-item span:nth-child(2) {
  height: 24px;
}
.buffer-item span:nth-child(3) {
  height: 28px;
}
.buffer-item span:nth-child(4) {
  height: 32px;
}
.buffer-item span:nth-child(5) {
  height: 36px;
}
.buffer-item span:nth-child(6) {
  height: 36px;
}
.buffer-item span:nth-child(7) {
  height: 32px;
}
.buffer-item span:nth-child(8) {
  height: 28px;
}
.buffer-item span:nth-child(9) {
  height: 24px;
}
.buffer-item span:nth-child(10) {
  height: 20px;
}
.buffer-btn {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: 200px;
  height: 46px;
  line-height: 46px;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  background: linear-gradient(360deg, #47cbb3 0%, #51d3b0 100%);
  box-shadow: 0px 5px 10px rgba(59, 201, 164, 0.3);
  border-radius: 100px;
}

</style>